<template>
    <div>
        <div v-if="this.countData.type=='circle'">
            <el-progress type="circle" :percentage="percentage" :format="circle$format" :color="customColor"></el-progress>
        </div>
        <div v-if="this.countData.type=='line'">
            <el-progress :percentage="percentage" :format="line$format" :color="customColor"></el-progress>
        </div>
        <div v-if="this.countData.type=='text'">
            <span>{{day}}天 {{hour}}：{{min}}：{{second}}</span>
        </div>
    </div>
</template>
<script>
export default {
    name:"countDown",
    data(){
        return {
            lastNum:60,
            countTime:null,
            percentage: 100,
            countData:{
                type:"circle",
                surplusNum:60,
                explain:"结束",
                isTime:true,
                unit:"s",
                currentTime:30,
                colorData:[
                    {"color":"#ccc","value":20},
                    {"color":"#000","value":10}
                ]
            },
            // countData:{
            //     type:"text",
            //     surplusNum:"2021-2-20",
            // },
            surplusNum:0,
            day: '0',
            hour: '00',
            min: '00',
            second: '00',
            end:0,
            countNow:0
        }
    },
    created(){
        this.initData();
    },
    methods:{
        initData(){
            // if(countData)
            switch(this.countData.type){
                case "circle":
                    this.circle$init();
                    break;
                case "line":
                    this.circle$init();
                    break;
                case "text":
                    this.text$init();
                    break;
            }
        },
        circle$init(){
            this.surplusNum=this.countData.currentTime;
            this.percentage=this.percentage-Number((100/this.countData.surplusNum).toFixed(2))*this.surplusNum;
            if(this.countData.isTime){
                this.countTime=setInterval(()=>{ 
                    if(this.surplusNum<=0){
                        clearInterval(this.countTime);
                        this.$emit("countFinish",this.countData);
                    }else{
                        this.surplusNum--;
                        let per=this.percentage-Number((100/this.countData.surplusNum).toFixed(2))
                        if(per<=0||this.surplusNum<=0){
                            per=0;
                        }
                        this.percentage=per;
                    }
                },1000)
            }else{
                this.countTime=this.countTime?clearInterval(this.countTime):null;
            }
            
        },
        circle$format(percentage) {
            return percentage === 0 ? this.countData.explain : `${this.surplusNum+this.countData.unit}`;
        },
        line$format(percentage){
            return percentage === 0 ? this.countData.explain : `${this.surplusNum+this.countData.unit}`;
        },
        customColor(){
            let color="#0000ff";
            for(var i=0;i<this.countData.colorData.length;i++){
                if(this.surplusNum<this.countData.colorData[i].value){
                    color=this.countData.colorData[i].color;
                }
            }
            return color;
        },
        text$init(){
            this.curStartTime=this.countData.surplusNum;
            // 设置截止时间
            let endDate = new Date(this.curStartTime) // this.curStartTime需要倒计时的日期
            this.end = endDate.getTime();
            // 获取当前时间
            let date = new Date();
            this.countNow = date.getTime();
            this.countTextTime();
        },
        // 倒计时
        countTextTime () {
            // 时间差
            let leftTime = this.end - this.countNow;
            // 定义变量 d,h,m,s保存倒计时的时间
            if (leftTime >= 0) {
                // 天
                this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
                // 时
                let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
                this.hour = h < 10 ? '0' + h : h;
                // 分
                let m = Math.floor(leftTime / 1000 / 60 % 60);
                this.min = m < 10 ? '0' + m : m;
                // 秒
                let s = Math.floor(leftTime / 1000 % 60);
                this.second = s < 10 ? '0' + s : s;
            } else {
                this.day = 0;
                this.hour = '00';
                this.min = '00';
                this.second = '00';
            }
            // 等于0的时候不调用
            if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
                this.$emit("countFinish",this.countData);
                return
            } else {
                this.countNow=this.countNow+1000;
                // 递归每秒调用countTime方法，显示动态时间效果,
                setTimeout(this.countTextTime, 1000);
            }
        }
    }
}
</script>